import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import Nav from "./componemts/Nav";
const ban1 = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/ban1.png"
const X = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/x.png"
function Home() {
  const history = useHistory();
  const [kuang, setKuang] = useState();
  const [zanwei, setZanwei] = useState(false);
  const [list] = useState([
    {
      img: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/home1.png",
      name: "司庆预告",
      kuang: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/yugao.jpg"
    },
    {
      img: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/home2.png",
      img_hui: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/home2_hui.png",
      name: "司庆祝福",
      kuang: "",
    },
    {
      img: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/home4.png",
      img_hui: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/home4_hui.png",
      name: "线下斯巴达",
      kuang: "",
    },
    {
      img: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/home3.png",
      img_hui: "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/home3_hui.png",
      name: "线上互动",
      kuang: "",
    }
  ]);
 
  function openGMap() {
    window.location.href = "https://uri.amap.com/marker?position=113.088648,28.156775&name=长沙国际会议中心";
  }
  function openGMap1() {
    window.location.href = "https://uri.amap.com/marker?position=113.088022,28.158576&name=长沙融创施柏阁酒店"
  }
  return (
    <div className="home">
      <div className="ban1"><img src={ban1} /></div>
      <div className="home_main">

        <div className="home_con">

          <div className="home_con_all">
            {list?.map((item, index) => {
              return (
                <div key={index}>
                  <img
                    onClick={() => {
                      if (item.name == '司庆预告') {
                        setKuang(item);
                      }
                      if(item.name == "司庆祝福"){
                        history.push("/list/siqingzhufu")
                      }
                      if(item.name == "线下斯巴达"){
                        history.push("/sbada")
                      }
                      if(item.name == "线上互动"){
                        history.push("/mini")
                        // setZanwei(true)
                      }
                    }}
                    src={item.img}
                    // src={index == 3 ? item.img_hui :item.img}
                  />
                  <div>{item.name}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <Nav></Nav>
      {kuang && ( // 弹窗 （满屏 jieshao | 中屏 jieshaoC）
        <div className="jieshao_box">
          <div className="back">
            <img onClick={() => { setKuang(false); }} src={X} />
          </div>
          <div className="jieshao">
            <img src={kuang.kuang} />
          </div>
        </div>
      )}
      {zanwei && <div className="zanwei_box" onClick={() => {
        setZanwei(false)
      }}>
        <div className="jieshao">
          <img src={"https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/zanwei.png"} />
        </div>
      </div>}

    </div>
  );
}

export default Home;
